<template>
  <div class="exam-list">
    <!-- 筛选 -->
    <div class="exam-filter">
      <el-form
        :inline="true"
        label-position="right"
        label-width="80px"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="考试名称">
              <el-input v-model="queryData.exam_name" placeholder="考试名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="考试学科">
              <el-select
                v-model="queryData.subject_id"
                placeholder="归属学科"
                clearable
                @change="changes"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目录名称">
              <el-select
                v-model="queryData.directory_id"
                placeholder="归属目录"
                clearable
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="考试类型">
              <el-select
                v-model="queryData.exam_type"
                placeholder="请选择考试类型"
                clearable
              >
                <el-option label="阶段考核" :value="1" />
                <el-option label="综合考试" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="锁屏方式">
              <el-select
                v-model="queryData.lock_screen"
                placeholder="请选择锁屏方式"
                clearable
              >
                <el-option label="不锁屏" :value="1" />
                <el-option label="锁屏" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input
                v-model="queryData.create_name"
                placeholder="请输入创建人"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
                align="right"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6" align="center">
            <el-button
              type="primary"
              size="small"
              plain
              @click="searchsubmit"
            >搜索</el-button>
            <el-button size="small" @click="onReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 表格 -->
    <div class="table-bg">
      <el-table :data="list" border style="width: 100%" :header-cell-style="{backgroundColor:'#fafafa'}">
        <el-table-column
          type="index"
          width="50px"
          label="序号"
          align="center"
        />
        <el-table-column prop="list" align="center" label="考试信息">
          <template slot-scope="{ row }">
            <div class="elrow">
              <span class="mr"><span style="color:#333;">考试ID:</span>{{ row.id }}</span>
              <span class="mr"><span style="color:#333;">考试名称:</span><el-button type="text" size="small">{{ row.exam_name }}</el-button></span>
              <span class="mr"><span style="color:#333;">归属学科:</span>{{ row.subject_name }}</span>
              <span class="mr"><span style="color:#333;">归属目录:</span>{{ row.directory_name }}</span>
            </div>
            <div class="elrow">
              <span class="mr"><span style="color:#333;">考试类型:</span>{{ row.exam_type === '1' ? '阶段考试' : '综合考试' }}</span>
              <span class="mr"><span style="color:#333;">锁屏方式:</span>{{ row.lock_screen ==='1'? '不锁屏': '锁屏' }}</span>
              <span class="mr"><span style="color:#333;">创建人:</span>{{ row.create_name }}</span>
              <span class="mr"><span style="color:#333;">创建时间:</span>{{ new Date(row.created_at).toLocaleDateString().replace(/\//g,'-') }}</span>
              <span class="mr"><span style="color:#333;">试卷信息:</span><el-button
                type="text"
                size="mini"
                class="look"
                @click="look(row.id,row.main_paper_name, '1')"
              >点击查看</el-button>
              </span>
              <span>推送班级信息:
                <el-button
                  v-if="row.exam_bind_class.length>0"
                  class="look"
                  type="text"
                  size="mini"
                  @click="look(row.id,row.main_paper_name, '2',row.exam_bind_class)"
                >点击查看</el-button>
                <span v-else>暂无</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="{ row }">
            <el-button
              type="warning"
              circle
              size="mini"
              icon="el-icon-connection"
              @click="look(row.id,row.subject_id, '3')"
            />
            <el-button
              v-if="row.exam_bind_class.length<=0"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="delRow(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页区域 -->
    <el-pagination
      class="pagination"
      :current-page.sync="queryData.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryData.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />

    <!-- 弹框 -->
    <lookInfo
      ref="lookbox"
      :paper-big-id="paperBigId"
      :push-big-id="pushBigId"
      :paper="paper"
      :type="type"
      :class-push="classPush"
      :look-class="lookClass"
      @updateList="updateList"
      @cancelBind="cancelBind"
    />

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import lookInfo from '@/views/exam/exam/components/lookInfo.vue'
import {
  getExamListApi,
  // getExamTree,
  delExamListApi,
  getLookClass
} from '@/api/exam/exam'
export default {
  name: 'AdvPos',
  components: {
    lookInfo
  },
  data() {
    return {
      list: [], // 表格数据
      total: 3, // 总数
      // 列表的需要的参数
      queryData: {
        exam_name: '',
        subject_id: '',
        directory_id: '',
        exam_type: '',
        lock_screen: '',
        create_name: '',
        create_time: '',
        page: 1,
        limit: 10
      },
      //       exam_time
      // main_paper_id
      paper: '', // 试卷信息
      type: '',
      lookClass: [], // 已推送班级
      classPush: [], // 链接班级
      pushBigId: 0, // 即将推送
      paperBigId: 0, // 即将推送
      time: []
    }
  },
  computed: {
    ...mapGetters(['subjectList', 'directoryList'])
  },
  async created() {
    // 调用初始化
    await this.initData()
    this.$store.dispatch('subject/getSubjectList')
  },
  methods: {
    cancelBind() {
      this.initData()
    },
    async updateList() {
      await this.initData()
    },
    async look(id, paper, type, classinfo) {
      this.pushBigId = id
      this.type = type
      if (classinfo) {
        this.initData()
        this.$refs.lookbox.paperTitle = '已推送信息'
        this.$refs.lookbox.dialogVisible = true
        this.lookClass = classinfo
      } else {
        if (type === '1') {
          this.$refs.lookbox.paperTitle = '试卷信息'
          console.log(paper)
          this.paper = paper
          this.$refs.lookbox.dialogVisible = true
        } else if (type === '3') {
          this.$refs.lookbox.paperTitle = '班级列表'
          this.$refs.lookbox.dialogVisible = true
          const re = await getLookClass({
            subject_id: paper,
            state: '1'
          })
          this.classPush = re.list
          const res = this.list.filter(item => {
            return item.id === this.pushBigId
          })
          this.paperBigId = res[0].main_paper_id
        }
      }
    },
    // 学科、目录下拉数据的逻辑调用
    changes(id) {
      this.queryData.directory_id = ''
      this.$store.commit('subject/setDirectoryList', id)
    },
    // 搜索提交
    searchsubmit() {
      // 页码变成1
      this.queryData.page = 1
      // 拉取列表
      this.initData()
    },
    // 初始化数据
    async initData() {
      this.queryData.create_time = this.time ? this.time.map(item => +item).join(',') : []
      // 发起请求
      const res = await getExamListApi(this.queryData)
      // 数据可能需要加工
      // 赋值
      this.total = res.total
      this.list = res.list
    },
    // 每页数量变化的时候
    sizeChange(newSize) {
      // newSize 最新的每页数量
      this.queryData.limit = newSize
      this.initData()
    },
    // 页码变化事件
    currentChange(newPage) {
      // newPage 最新的页码
      this.queryData.page = newPage
      this.initData()
    },
    // 重置
    onReset() {
      // 重置搜索表单
      this.queryData = {
        exam_name: '',
        subject_id: '',
        directory_id: '',
        exam_type: '',
        lock_screen: '',
        create_name: '',
        create_time: '',
        page: 1,
        limit: 10
      }
      this.time = []
      // 拉取列表
      this.$store.commit('subject/clearDirectoryList')
      this.initData()
    },
    // 删除事件
    async delRow(rowId) {
      // console.log(11)
      // 弹出确认框
      await this.$confirm('确定删除吗？')
      // 发生删除请求
      await delExamListApi(rowId)
      // // 提示成功
      this.$message.success('删除成功')
      // 边缘问题：如果不是第一页，且这一页只有一个，且删除成功，页码需要-1
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--
      }
      // 列表更新
      this.initData()
    }
  }
}
</script>

<style scoped lang="scss">
.table-bg{
  background-color: #fff;
  padding: 20px 20px 0 20px;
}
.elrow .look{
  width: 55px;
  height: 20px;
  padding: 0;
  font-size: 7px;
  border: 1px solid #d9ecff;
  background-color: #ecf5ff;
}
.elrow {
  text-align: left;
  font-size: 13px;
}
.elrow .mr {
  margin-right: 20px;
}
.exam-filter {
  background-color: #fff;
  padding: 16px 16px 0 16px;
}
.el-date-editor--daterange {
  width: 200px;
}
.pagination {
  background-color: #fff;
  padding: 20px 20px;
  display: flex;
  justify-content: end;
}
.exam-list{
  padding-bottom: 25px;
}
</style>
